<template>
    <div class="zong">
            <!-- 头部选择器 -->
            <div class="topselect">
                    <el-select v-model="mold" class="tsel" size="mini" placeholder="按类型：">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="grade" class="tsel" size="mini" placeholder="按等级：">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                     <div class="block">
                        <el-date-picker
                        size="mini"
                        v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
            </div>

            <!-- 查询，清空按钮 -->
            <div class="middlebtn">
                  <el-button type="primary" size="mini">查询</el-button>
                  <el-button type="info" size="mini">清空</el-button>
            </div>

            <!-- 底部，功能按钮 -->
            <div class="btmbtn">
                <div style="flex:9;">
                    <el-button size="mini" icon="el-icon-plus" plain @click="dialogVisible = true">
                     添加任务
                     </el-button>
                    <el-button size="mini" plain>批量删除</el-button>
                    <el-button size="mini" plain>批量审核</el-button>
                </div>
                <div class="righttext">
                    <span>按时间先后排序</span>
                </div>
               
            </div>

            <!-- <el-card> -->
            <div class="bom"> 
                <el-table border
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    :header-cell-style="{background:'#e4ebed',color:'#676e70',fontWeight:'normal',border:'none'}"
                    :cell-style="{padding:'8px 0',color:'#000'}">

                    <el-table-column
                    type="selection"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="id"
                    label="ID"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="name"
                    label="客户名称"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="task_type"
                    label="任务类型"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="task_level"
                    label="任务等级"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="already"
                    label="已领/名额"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="cut_date"
                    label="截止日期"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="add_time"
                    label="添加时间"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="state"
                    label="状态"
                    align="center">
                    </el-table-column>

                    <el-table-column
                    label="操作"
                    align="center"
                    width="198">
                        <template slot-scope="scope">
                            <el-button class="detail" size="mini" @click="detailVisible=true">领取详情</el-button>
                            <el-button class="btn" size="mini" @click="upTask(scope.row)">编辑</el-button>
                            <el-button class="btn" size="mini" @click="delTask(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>

            <!--添加任务弹出框-->
             <div class="up_task">
                <el-dialog
                :visible.sync="dialogVisible"
                width="50%"
                style="margin-top:-10vh;">
                <template #title>
                    <span class="dialogTitle">添加任务</span>
                </template>


                <el-form :model="upform" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="form.name" size="small">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="logo图片">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="播放量限">
                        <el-input v-model="form.name" size="small" style="width:20%">
                        </el-input> <span>次</span>
                    </el-form-item>

                    <el-form-item label="佣金金额">
                        <div class="up_upload" style="margin-left:10px;">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>

                        <div class="up_uploadtwo">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:21%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>

                        <div class="up_uploadtwo">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:21%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>
                        
                    </el-form-item>

                    <el-form-item label="产品图片">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="任务类型">
                        <el-radio v-model="form.radio" label="1">抖音任务</el-radio>
                        <el-radio v-model="form.radio" label="2">快手任务</el-radio>
                        <el-radio v-model="form.radio" label="3">其他</el-radio>
                    </el-form-item>

                    <el-form-item label="任务类别">
                        <el-select v-model="selvalue" size="small">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="任务要求">
                        <el-input v-model="form.name" type="textarea" :rows="3" style="width:85%">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="图片素材">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="视频素材">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="文字素材">
                        <el-input v-model="form.name" type="textarea" :rows="3" style="width:85%">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="有效日期">
                            <el-date-picker
                            v-model="form.value1"
                            type="date"
                            placeholder="选择日期" size="small" style="float:left;width:30%;">
                            </el-date-picker>
                            
                            <div style="float:left;margin:0 10px;">-</div>

                            <el-date-picker
                            v-model="form.value2"
                            type="date"
                            placeholder="选择日期" size="small" style="width:35%;">
                            </el-date-picker>

                    </el-form-item>

                    <div class="submit">
                        <el-button type="primary" size="mini">提交</el-button>
                    </div>
                </el-form>

                
                </el-dialog>
            </div>

            <!--删除任务弹出框-->
            <div class="del_task">
                 <el-dialog
                :visible.sync="delogVisible"
                width="50%"
                style="margin-top:10vh;">

                <template #title>
                    <span class="dialogTitle">确定要删除该任务吗？</span>
                </template>


                <div class="save">
                    <el-button size="mini">取消</el-button>
                    <el-button size="mini">确定</el-button>
                </div>

                 </el-dialog>
            </div>

            <!--修改任务弹出框-->
            <div class="up_task">
                <el-dialog
                :visible.sync="uplogVisible"
                width="50%"
                style="margin-top:-10vh;">
                <template #title>
                    <span class="dialogTitle">编辑任务</span>
                </template>


                <el-form :model="upform" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="form.name" size="small">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="logo图片">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="播放量限">
                        <el-input v-model="form.name" size="small" style="width:20%">
                        </el-input> <span>次</span>
                    </el-form-item>

                    <el-form-item label="佣金金额">
                        <div class="up_upload" style="margin-left:10px;">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>

                        <div class="up_uploadtwo">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:21%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>

                        <div class="up_uploadtwo">
                            <span>播放量</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>-</span>
                            <el-input v-model="form.name" size="small" style="width:21%" />
                            <span>次，</span>
                            <el-input v-model="form.name" size="small" style="width:20%" />
                            <span>元；</span>
                        </div>
                        
                    </el-form-item>

                    <el-form-item label="产品图片">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="任务类型">
                        <el-radio v-model="form.radio" label="1">抖音任务</el-radio>
                        <el-radio v-model="form.radio" label="2">快手任务</el-radio>
                        <el-radio v-model="form.radio" label="3">其他</el-radio>
                    </el-form-item>

                    <el-form-item label="任务类别">
                        <el-select v-model="selvalue" size="small">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="任务要求">
                        <el-input v-model="form.name" type="textarea" :rows="3" style="width:85%">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="图片素材">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="视频素材">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="文字素材">
                        <el-input v-model="form.name" type="textarea" :rows="3" style="width:85%">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="有效日期">
                            <el-date-picker
                            v-model="form.value1"
                            type="date"
                            placeholder="选择日期" size="small" style="float:left;width:30%;">
                            </el-date-picker>
                            
                            <div style="float:left;margin:0 10px;">-</div>

                            <el-date-picker
                            v-model="form.value2"
                            type="date"
                            placeholder="选择日期" size="small" style="width:35%;">
                            </el-date-picker>

                    </el-form-item>

                    <div class="submit">
                        <el-button type="primary" size="mini">提交</el-button>
                    </div>
                </el-form>

                
                </el-dialog>
            </div>

            <!--领取详情弹出框-->
            <div >
                <el-dialog
                :visible.sync="detailVisible"
                width="50%"
                style="margin-top:-10vh;">
                <template #title>
                    <span class="dialogTitle">领取详情</span>
                </template>

                    <el-table
                    show-summary
                    :data="detailData"
                    :header-cell-style="{color:'#000',fontWeight:'bold',border:'none'}"
                    style="width: 100%">

                    <el-table-column
                        prop="name"
                        label="用户名称"
                        width="180">
                    </el-table-column>

                    <el-table-column
                        prop="time"
                        label="领取时间"
                        width="180">
                    </el-table-column>

                    <el-table-column
                        prop="get_play"
                        label="领取播放量（次）">
                    </el-table-column>

                    <el-table-column
                        prop="real_play"
                        label="实际播放量（次）">
                    </el-table-column>

                    </el-table>
                
                </el-dialog>
            </div>
        <!-- </el-card> -->
    </div>
</template>

<script>
export default {
     name:'',
    components: {

    },
    props: {

    },
    data() {
        return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }, {
                    value: '选项4',
                    label: '龙须面'
                    }, {
                    value: '选项5',
                    label: '北京烤鸭'
                    }],
                tableData: [{
                id: 82,
                name: '大脸猫77',
                task_type: '微信任务',
                task_level:'普通用户',
                already:'0/1000',
                cut_date:'2022-12-30',
                add_time:'2022-05-18',
                state:'已审核'
                },
                {
                id: 82,
                name: '大脸猫77',
                task_type: '微信任务',
                task_level:'普通用户',
                already:'0/1000',
                cut_date:'2022-12-30',
                add_time:'2022-05-18',
                state:'已审核'
                },
                {
                id: 82,
                name: '大脸猫77',
                task_type: '微信任务',
                task_level:'普通用户',
                already:'0/1000',
                cut_date:'2022-12-30',
                add_time:'2022-05-18',
                state:'已审核'
                },
                {
                id: 82,
                name: '大脸猫77',
                task_type: '微信任务',
                task_level:'普通用户',
                already:'0/1000',
                cut_date:'2022-12-30',
                add_time:'2022-05-18',
                state:'已审核'
                }],
                detailData:[
                    {
                        name:'微笑的刺客',
                        time:'2022.06.15',
                        get_play:1000,
                        real_play:800
                    },
                    {
                        name:'微笑的刺客',
                        time:'2022.06.15',
                        get_play:1000,
                        real_play:0
                    },
                    {
                        name:'微笑的刺客',
                        time:'2022.06.15',
                        get_play:1000,
                        real_play:800
                    },
                ],
                mold:'',
                grade:'',
                time:'',
                dialogVisible:false,
                delogVisible:false,
                uplogVisible:false,
                detailVisible:false,
                form:{
                    name:'',
                    radio:'',
                    radio2:'',
                    value1:'',
                    value2:''
                },
                imageUrl:'',
                selvalue:0,
                options:[
                    {
                        label:'日化',
                        value:0
                    },
                    {
                        label:'日化',
                        value:1
                    },
                    {
                        label:'日化',
                        value:2
                    },
                ],
                upform:{
                      name:'',
                    radio:'',
                    radio2:'',
                    value1:'',
                    value2:''
                }
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        delTask(e){
            this.delogVisible = true
        },

        upTask(e){
            this.uplogVisible = true
        },

    //     getSummaries(param) {
    //     const { columns, data } = param;
    //     const sums = [];
    //     columns.forEach((column, index) => {
    //       if (index === 0) {
    //         sums[index] = '总价';
    //         return;
    //       }
    //       const values = data.map(item => Number(item[column.property]));
    //       if (!values.every(value => isNaN(value))) {
    //         sums[index] = values.reduce((prev, curr) => {
    //           const value = Number(curr);
    //           if (!isNaN(value)) {
    //             return prev + curr;
    //           } else {
    //             return prev;
    //           }
    //         }, 0);
    //         sums[index] += ' 元';
    //       } else {
    //         sums[index] = 'N/A';
    //       }
    //     });

    //     return sums;
    //   }
    },
};
</script>

<style scoped lang='less'>
.bom{
    margin-left: 20px;
    margin-top: 10px;
}
.bom .el-table{
    width: 100%;
}

.el-card{
    margin-top: 30px;
    margin-left: 30px;
    width: 96%;
    height: 620px;
}

.detail{
    background-color:#f9ae1e;
    color: #fff;
    padding: 6px;
}

.btn{
    background-color:#adbabf;
    color: #fff;
    border-radius: 0;
    padding: 6px;
}


.zong{
    width: 98%;
    background: white;
    /* margin-top: 20px; */
    /* margin-left: 20px; */
    height: 600px
}
.topselect{
    display: flex;
}
.tsel{
    margin-left: 20px;
    margin-top: 20px;
}

.block{
    margin-left: 50px;
    margin-top: 20px;
}

.middlebtn{
    margin-left: 20px;
    margin-top: 10px;
}
.middlebtn .el-button:first-child{
    background-color:#3170ab;
    color: #fff;
    border: none;
    border-radius: 3px;
}

.middlebtn .el-button:nth-child(2){
    background-color:#e3e4e8;
    color:#8b8c90;
    border: none;
    border-radius: 3px;
}

.btmbtn{
    margin-left: 20px;
    margin-top: 40px;
    display: flex;
}

.btmbtn .el-button:first-child{
     background-color:#3170ab;
     color: #fff;
     border-radius: 3px;
}

.btmbtn .el-button:nth-child(2){
    background-color: #fff;
    color:#90aed1;
    border: 2px solid #82add0;
    border-radius: 3px;
}

.btmbtn .el-button:nth-child(3){
    background-color: #fff;
    color:#90aed1;
    border: 2px solid #82add0;
    border-radius: 3px;
}

.righttext{
    flex: 1;
    font-size: 13px;
    color: #5e5f68;
}

.add_task .el-form-item{
    margin-left: 20px;
}

.submit .el-button{
    width: 80px;
    background-color:#3170ab;
    color: #fff;
    border: none;
    border-radius: 3px;
    margin-left: 320px;
    margin-top: 30px;
}

/deep/ .el-form-item .el-form-item__label{
        text-align: left;
}

/deep/ .el-dialog{
    margin-top: 10vh;
    border-radius: 10px;
}

.add_task .el-form-item{
    height: 30px;
}

.add_task .line{
    margin: 0;
    margin-bottom: 30px;
}

.save{
    display: flex;
}

.del_task .line{
    margin: 0;
    margin-bottom: 10px;
}

.save .el-button:nth-child(2){
    width: 80px;
    background-color:#3170ab;
    color: #fff;
    border: none;
    border-radius: 3px;
    margin-top: 30px;
}

.save .el-button:first-child{
    width: 80px;
    background-color:#e3e4e8;
    color:#8b8c90;
    border: none;
    border-radius: 3px;
    margin-top: 30px;
    margin-left:35%;
}

.up_task .line{
    margin: 0;
    margin-bottom: 20px;
}

/deep/.avatar-uploader .el-upload {
    width: 100px;
    height: 100px;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 100px;
    text-align: center;
  }

.up_upload .el-input{
    padding: 0 10px;
}

.up_uploadtwo .el-input{
    padding: 0 10px;
}

.up_uploadtwo{
    padding: 0 10px;
}

/deep/.el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td{
    background-color: #fff;
    color: red;
}



</style>
